import React, { Component } from 'react'
import './index.css';
export default class Main extends Component {
    render() {
        // 获取父级组件传入的todos 数据
        let {todos} = this.props;
        return (
            <ul className="todo-main">
                    {
                        todos.map(item =>{
                        return  <li key = {item.id}>
                        <label>
                            <input type="checkbox"  checked = {item.done} onChange={this.change(item.id)}/>
                            <span>{item.title}</span>
                        </label>
                        <button onClick = {this.deleteTodo(item.id)} className="btn btn-danger" style={{ display: item.done?'block':'none' }}>删除</button>
                    </li>
                    })
                } 
                {todos.length === 0 &&<div className = "empty">(:空空如也:)</div>}    
            </ul> 
            )
    }
        change  = (id)=>{
            return e =>{
                let status = e.target.checked;
                //设置状态的修改
                this.props.checkTodo(id,status);
            }
        }
         deleteTodo = (id)=>{
                return ()  => {
                  this.props.delete(id);
                }
         }
}
